<template>
  <div class="console">
    <!--数据卡片-->
    <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12">
      <n-grid-item>
        <NCard
          :hoverable="true"
          title="每日订单量"
          :segmented="{ content: 'hard', footer: 'hard' }"
          size="small"
          style="margin-top: 12px; border-radious: 30px"
        >
          <template #header-extra>
            <n-tag type="success">日</n-tag>
          </template>
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="0" :endVal="orderQuantityPerDay" class="text-3xl" />
          </div>
          <div class="py-1 px-1 flex justify-between">
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                日同比
                <span>{{payDayPerCent}}</span>
                <!-- <CountTo :startVal="0" suffix="%" :endVal="payDayPerCent" /> -->
                <n-icon size="12" color="#00ff6f">
                  <component is="CaretUpOutlined" />
                </n-icon>
              </template>
            </div>
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                周同比
                  <span>{{payWeeksPerCent}}</span>
                <!-- <CountTo :startVal="0" suffix="%" :endVal="payWeeksPerCent" /> -->
                <n-icon size="12" color="#ffde66">
                  <component is="CaretDownOutlined" />
                </n-icon>
              </template>
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" text :repeat="2" />
              <template v-else>
                <div class="text-sn"> 日订单总量： </div>
                <div class="text-sn">
                  <CountTo :startVal="0" :endVal="orderQuantityPerDay" />
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          :hoverable="true"
          style="margin-top: 12px; border-radious: 30px"
          title="每周订单量"
          :segmented="{ content: 'hard', footer: 'hard' }"
          size="small"
        >
          <template #header-extra>
            <n-tag type="info">周</n-tag>
          </template>
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="0" :endVal="weeklyOrderQuantity" class="text-3xl" />
          </div>
          <div class="py-2 px-2 flex justify-between">
            <div class="text-sn flex-1">
              <n-progress
                type="line"
                :percentage="payWeeksPerCent"
                :indicator-placement="'inside'"
                processing
                unit=""
              />
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                <div class="text-sn"> 周订单总量： </div>
                <div class="text-sn">
                  <CountTo :startVal="0" :endVal="weeklyOrderQuantity" />
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          :hoverable="true"
          style="margin-top: 12px; border-radious: 30px"
          title="日退款量"
          :segmented="{ content: 'hard', footer: 'hard' }"
          size="small"
        >
          <template #header-extra>
            <n-tag type="warning">日</n-tag>
          </template>
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="0" :endVal="amountOfRefundPerDay" class="text-3xl" />
          </div>
          <div class="py-1 px-1 flex justify-between">
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                日同比
                <span>{{refundDayPerCent}}</span>
                <!-- <CountTo :startVal="0" suffix="%" :endVal="refundDayPerCent" /> -->
                <n-icon size="12" color="#00ff6f">
                  <component is="CaretUpOutlined" />
                </n-icon>
              </template>
            </div>
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                周同比
                <span>{{refundWeeksPerCent}}</span>
                <!-- <CountTo :startVal="0" suffix="%" :endVal="refundWeeksPerCent" /> -->
                <n-icon size="12" color="#ffde66">
                  <component is="CaretDownOutlined" />
                </n-icon>
              </template>
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                <div class="text-sn"> 日退款量： </div>
                <div class="text-sn">
                  <CountTo :startVal="0" :endVal="amountOfRefundPerDay" />
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          :hoverable="true"
          style="margin-top: 12px; border-radious: 30px"
          title="账户信息"
          :segmented="{ content: 'hard', footer: 'hard' }"
          size="small"
        >
          <template #header-extra>
            <n-tag type="error">账户</n-tag>
          </template>
          <n-grid :cols="3" :x-gap="14">
            <n-gi span="2">
              <n-space justify="start" style="margin-bottom: 4px">
                <span style="font-size: 16px">总金额：{{ balance || 0 }}</span>
              </n-space>
              <n-space justify="start" style="margin-top: 14px">
                <span style="font-size: 16px">已提现金额：{{ proposedAmount || 0 }}</span>
              </n-space>
            </n-gi>
            <n-gi span="1">
              <n-space justify="start" >
                <DrawMoney />
                <PayFor />
              </n-space>
            </n-gi>
          </n-grid>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                <div class="text-sn"> 账户信息</div>
                <div class="text-sn"> </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
    </n-grid>
    <!--今日订单总量-->
    <n-grid :cols="8" :x-gap="14">
      <n-gi span="5">
        <VisiTab />
      </n-gi>
      <n-gi span="3">
        <ExchangeRate />
      </n-gi>
    </n-grid>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, provide } from 'vue';
// import { getConsoleInfo } from '@/api/dashboard/console';
import PayFor from '@/components/modal/pay.vue';
import DrawMoney from '@/components/modal/drawMoney.vue';
import VisiTab from './components/VisiTab.vue';
import ExchangeRate from './components/ExchangeRate.vue';
import { CountTo } from '@/components/CountTo/index';
import { getConsoleInfo,getExcRate } from '@/api/dashboard/console';
import {
  CaretUpOutlined,
  CaretDownOutlined,
  UsergroupAddOutlined,
  BarChartOutlined,
  ShoppingCartOutlined,
  AccountBookOutlined,
  CreditCardOutlined,
  MailOutlined,
  TagsOutlined,
  SettingOutlined,
} from '@vicons/antd';
import { LogoPaypal } from '@vicons/ionicons5';
import { number } from 'vue-types';
import { createStorage } from '@/utils/Storage';

const cardHeaderStyle = ref({ 'border-bottom': '1px solid #eee', 'font-size': '16px' });

const loading = ref(true);
const visits = ref({});
const saleroom = ref({});
const orderLarge = ref({});
const volume = ref({});
const acctNo = ref(0); // 账户号
const balance = ref(); // 账户余额
const proposedAmount = ref(0); // 已提现金额
const orderQuantityPerDay = ref(); // 商家当天订单数量 
const amountOfRefundPerDay = ref(); // 商家当天退款数量
const weeklyOrderQuantity = ref(); // 商家周订单数量
const payDayPerCent = ref(0); // 日同比
const payWeeksPerCent = ref(0); // 周同比
const refundDayPerCent = ref(0); // 退款日同比
const refundWeeksPerCent = ref(0); // 退款周同比
const tradingVolume = ref(0); // 交易量

const drawBalance = ref();
onMounted(async () => {
  loading.value = false;
});

const Storage = createStorage({ storage: localStorage });
let custNo = Storage.get('custNo');
getConsoleInfo({ custNo }).then((res) => {
  console.log(res);
  acctNo.value = res.data.body.acctNo || 0;
  drawBalance.value = res.data.body.balance ;
  console.log(drawBalance.value );
  balance.value = res.data.body.balance || 0;
  proposedAmount.value = res.data.body.proposedAmount || 0;
  orderQuantityPerDay.value = res.data.body.orderQuantityPerDay || 0;
  amountOfRefundPerDay.value = res.data.body.amountOfRefundPerDay || 0;
  weeklyOrderQuantity.value = res.data.body.weeklyOrderQuantity || 0;
  payDayPerCent.value = res.data.body.payDayPerCent || 0;
  payWeeksPerCent.value = res.data.body.payWeeksPerCent || 0;
  refundDayPerCent.value = res.data.body.refundDayPerCent || 0;
  refundWeeksPerCent.value = res.data.body.refundWeeksPerCent || 0;
  tradingVolume.value = res.data.body.tradingVolume || 0;
});;

provide('drawBalance', drawBalance);
</script>